<template>
  <div class="device-child">
    <div style="margin: 20px;">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>设备管理</el-breadcrumb-item>
        <el-breadcrumb-item to="/IoT/device">设备</el-breadcrumb-item>
        <el-breadcrumb-item>设备详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-descriptions
      class="margin-top"
      title="设备详细"
      :column="2"
      :size="size"
      border
    >
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            产品
          </div>
        </template>
        {{ product.name || "暂无" }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <iphone />
            </el-icon>
            设备类型
          </div>
        </template>
        {{ deviceType.name || "暂无" }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <location />
            </el-icon>
            deviceKey
          </div>
        </template>
        {{ device.deviceKey || "暂无" }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            deviceSecret
          </div>
        </template>
        {{ device.deviceSecret || "暂无" }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <office-building />
            </el-icon>
            在线状态
          </div>
        </template>
        {{ device.onlineStatus ? "在线" : "离线" }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider />
    <el-tabs class="el-tab" @tab-click="handleClick">
      <el-tab-pane label="设备信息" name="first">
        <div>
          <el-descriptions
            class="margin-top"
            title="设备信息"
            :column="2"
            :size="size"
            border
          >
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <user />
                  </el-icon>
                  产品名称
                </div>
              </template>
              {{ product.name || "暂无" }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <iphone />
                  </el-icon>
                  ProductKey
                </div>
              </template>
              {{ product.productKey || "暂无" }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <location />
                  </el-icon>
                  地域
                </div>
              </template>
              {{ product.areaCode || "暂无" }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <tickets />
                  </el-icon>
                  DeviceName
                </div>
              </template>
              {{ device.name || "暂无" }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <office-building />
                  </el-icon>
                  创建时间
                </div>
              </template>
              {{ device.createTime || "暂无" }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-tab-pane>
      <el-tab-pane label="Topic列表" name="second">
        <h4 style="margin-left: 10px">已订阅 Topic 列表</h4>
        <el-table :data="deviceTopicList" style="width: 100%">
          <el-table-column prop="topic" label="设备的Topic"></el-table-column>
          <el-table-column label="操作">
            <el-button type="text" disabled>详情</el-button>
            <el-button type="text" disabled>删除</el-button>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="物理型数据" name="third"> 暂时无数据 </el-tab-pane>
      <el-tab-pane label="上报数据" name="fourth">
        <el-table :data="message" :border="parentBorder" style="width: 100%">
          <el-table-column type="expand">
            <template #default="props">
              <el-descriptions title="详情信息" :column="2">
                <el-descriptions-item label="DviceKey">{{
                  props.row.device
                }}</el-descriptions-item>
                <el-descriptions-item label="ProductKey">{{
                  props.row.productKey
                }}</el-descriptions-item>
                <el-descriptions-item label="租户ID">{{
                  props.row.tenantId
                }}</el-descriptions-item>
                <el-descriptions-item label="创建时间">
                  {{ props.row.createTime }}
                </el-descriptions-item>
                <el-descriptions-item label="土壤湿度">
                  {{ props.row.soilHumidity }}
                </el-descriptions-item>
                <el-descriptions-item label="土壤温度">
                  {{ props.row.soilTemperature }}
                </el-descriptions-item>
                <el-descriptions-item label="土壤HP值">
                  {{ props.row.soilPh }}
                </el-descriptions-item>
                <el-descriptions-item label="土壤有机物">
                  {{ props.row.soilNpk }}
                </el-descriptions-item>
                <el-descriptions-item label="环境温度">
                  {{ props.row.airTemperature }}
                </el-descriptions-item>
                <el-descriptions-item label="空气湿度">
                  {{ props.row.airHumidity }}
                </el-descriptions-item>
                <el-descriptions-item label="光照强度">
                  {{ props.row.illumination }}
                </el-descriptions-item>
                <el-descriptions-item label="碳含量">
                  {{ props.row.co2 }}
                </el-descriptions-item>
                <el-descriptions-item label="PH值">
                  {{ props.row.ph }}
                </el-descriptions-item>
                <el-descriptions-item label="空气流速">
                  {{ props.row.windSpeed }}
                </el-descriptions-item>
                <el-descriptions-item label="水流流速">
                  {{ props.row.flowVelocity }}
                </el-descriptions-item>
              </el-descriptions>
            </template>
          </el-table-column>
          <el-table-column label="DeviceKey" prop="device" />
          <el-table-column label="ProductKey" prop="productKey" />
          <el-table-column label="创建时间" prop="createTime" />
          <el-table-column label="空气温度" prop="airTemperature" />
          <el-table-column label="空气湿度" prop="airHumidity" />
        </el-table>
        <el-pagination
          v-model:current-page="currentPage1"
          :page-size="megPage.pageSize"
          :disabled="disabled"
          :background="background"
          layout="total, prev, pager, next"
          :total="megPage.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="margin-top: 10px"
        />
      </el-tab-pane>
      <el-tab-pane label="发送数据" name="five"> 暂时无数据 </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  name: "DeviceChild",
  data() {
    return {
      disabled: false, // 控制是否禁用分页
      background: true, // 控制是否有背景
      parentBorder: false,
      devicePageBean: {
        pageNum: 1,
        pageSize: 5,
      },
      device: {
        productId: "",
      },
      devices: [],
      deviceType: {},
      options: [],
      tenantId: "1658095188329779300",
      title: "设备管理",
      deviceID: "",
      deviceTopicList: [],
      product: {},
      message: [],
      megPage: {
        pageNum: 1,
        pageSize: 4,
      },
    };
  },
  props: {},
  mounted() {},
  methods: {
    handleSizeChange(val) {
      this.megPage.pageSize = val;
      this.getMessages();
    },
    handleCurrentChange(val) {
      this.megPage.pageNum = val;
      this.getMessages();
    },
    getMessages() {
      this.$axios({
        method: "GET",
        url: `device/upLink/${this.product.productKey}/${this.device.deviceKey}/${this.device.tenantId}/${this.megPage.pageNum}/${this.megPage.pageSize}`,
      })
        .then((res) => {
          if (res.code == 200) {
            this.megPage = res.data;
            this.message = res.data.list;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getDeviceTypt() {
      this.$axios({
        method: "GET",
        url: "device/type/" + this.device.deviceTypeId,
      })
        .then((res) => {
          this.deviceType = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getProduct() {
      this.$axios({
        method: "GET",
        url: "product/get/" + this.device.productId,
        headers: {
          "Content-Type": "application/json", // 明确设定内容类型
        },
      })
        .then((res) => {
          if (res.code == 200) {
            this.product = res.data;
            this.getMessages();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getDevice() {
      this.$axios({
        method: "GET",
        url: "device/" + this.deviceID,
      })
        .then((res) => {
          if (res.code) {
            this.device = res.data.device;
            this.deviceTopicList = res.data.deviceTopicList;
            this.getProduct();
            this.getDeviceTypt();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    // 获取路由参数中的id
    this.deviceID = this.$route.params.id;
    this.getDevice();
  },
};
</script>

<style scoped>
.el-descriptions {
  margin-left: 20px;
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
.el-tab {
  margin-left: 20px;
}
</style>